import React, { useContext } from 'react';
import { ConfigProvider, Slider as AntdSlider } from 'antd';
import type { SliderSingleProps } from 'antd';

import { useSliderStyles } from './style';
import { sliderThemeConfig } from '../../themes/slider';

// 导出样式扩展 Hook，方便用户使用特殊效果
export { useSliderStyles } from './style';

export interface SliderProps extends Omit<SliderSingleProps, 'range' | 'value' | 'defaultValue' | 'onChange'> {
  range?: boolean | { draggableTrack?: boolean; editable?: boolean; minCount?: number };
  value?: number | number[];
  defaultValue?: number | number[];
  onChange?: (value: number | number[]) => void;
  editable?: boolean;
}

const Slider: React.FC<SliderProps> = ({ 
  className,
  ...restProps 
}) => {
  const { styles, cx } = useSliderStyles();
  const context = useContext(ConfigProvider.ConfigContext);
  
  // 合并样式：基础样式 + 用户样式
  const sliderClassName = cx(
    styles.enhancedSlider,      // 基础样式增强
    className                   // 用户自定义样式
  );

  return (
    <ConfigProvider
      theme={{
        components: {
          Slider: {
            ...sliderThemeConfig,
            ...context?.theme?.components?.Slider,
          },
        },
      }}
    >
      <AntdSlider 
        className={sliderClassName} 
        {...restProps as any} 
      />
    </ConfigProvider>
  );
};

export { Slider };
export default Slider;

